<template>
  <div class="edit-announcement-page">
    <!-- 社团基本信息 -->
    <div class="club-info-container">
      <el-descriptions border class="custom-descriptions">
        <el-descriptions-item>
          <template #label>
            <div class="custom-label">社团名称</div>
          </template>
          <div class="custom-content">{{ clubInfo.clubName }}</div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="custom-label">社团编号</div>
          </template>
          <div class="custom-content">{{ clubInfo.id }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 公告编辑区域 -->
    <div class="announcement-container">
      <h2>编辑社团公告</h2>
      <div class="form-container">
        <el-form :model="announcement" label-width="120px">
          <el-form-item label="公告标题">
            <el-input
              v-model="announcement.title"
              placeholder="请输入公告标题"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="公告正文">
            <el-input
              v-model="announcement.content"
              type="textarea"
              :rows="6"
              placeholder="请输入公告正文"
              maxlength="1000"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="submit-button-container">
      <el-button type="primary" @click="submitAnnouncement">发布公告</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useUserStore } from "../../../stores/user.ts";
import {
  type ClubAnnouncementAddRequest,
  ClubAnnouncementControllerService,
  ClubControllerService
} from "../../../../generated";
import {type Action, ElMessage, ElMessageBox} from "element-plus";

interface ClubInfo {
  clubName: string;
  id: number;
}

interface ClubAnnouncement {
  title: string;
  content: string;
}

const clubInfo = ref<ClubInfo>({
  clubName: "",
  id: 0,
});
const announcement = ref<ClubAnnouncement>({
  title: "",
  content: "",
});
const userStore = useUserStore();

const loadData = async () => {
  const clubId = userStore.managedClubId;
  try {
    const res = await ClubControllerService.getClubVoById(clubId);
    if (res.code === 0) {
      clubInfo.value = {
        id: res.data.id,
        clubName: res.data.clubName
      };
      announcement.value = {
        title: res.data?.clubAnnouncementVo?.title || '',
        content: res.data?.clubAnnouncementVo?.content || ''
      };
    } else {
      announcement.value = null; // 如果数据为空或格式不正确，设置为 null
      ElMessage.error("加载数据失败:" + res.message);
    }
  } catch (error) {
    announcement.value = null; // 如果接口调用失败，设置为 null
    console.error("加载数据时发生错误:", error.message || error);
  }
};

onMounted(() => {
  loadData();
});

const submitAnnouncement = async () => {
  const request = {
    clubId: clubInfo.value.id,
    title: announcement.value.title,
    content: announcement.value.content,
  } as ClubAnnouncementAddRequest



  try {
    const res = await ClubAnnouncementControllerService.addClubAnnouncement(request);
    if (res.code === 0){
      const successStr = '公告编号: ' + res.data;
      ElMessageBox.alert(
          successStr,
          "修改成功",
          {
            confirmButtonText: "确定",
            callback: (action: Action) => {
              if (action === "confirm") {
                try {
                  window.close();
                } catch (e) {
                  ElMessage({
                    type: "info",
                    message: "无法自动关闭页面，请手动关闭此标签页。",
                    duration: 0,
                    showClose: true,
                  });
                }
              }
            },
          },
      );
    } else {
      const errorStr = '错误原因: ' + res.message;
      ElMessageBox.alert(errorStr, "修改失败", {
        confirmButtonText: "确定",
        callback: (action: Action) => {
          if (action === "confirm") {
            window.location.reload()  // 刷新当前页面
          }
        },
      });
    }
  } catch (error) {
    console.error("提交数据时发生错误:", error.message || error);
  }
};
</script>
<style scoped>
.edit-announcement-page {
  margin-top: 20px;
}

.club-info-container,
.announcement-container,
.submit-button-container {
  margin-bottom: 20px;
}

.submit-button-container {
  display: flex;
  justify-content: flex-end;
}

.custom-descriptions {
  margin-bottom: 20px;
}

.custom-label {
  font-weight: bold;
}
</style>
